<script setup lang="ts">
const campusLife = [
  {
    imageUrl:
      'https://ai-public.mastergo.com/ai/img_res/aacd9044ca0e31a056f6e7e6d98f7e92.jpg',
    title: '学在某大',
    description: '追求学术卓越，培养创新精神',
  },
  {
    imageUrl:
      'https://ai-public.mastergo.com/ai/img_res/28eabb2c757af38568919205f1bbe821.jpg',
    title: '活在某大',
    description: '丰富多彩的校园文化生活',
  },
];
</script>

<template>
  <!-- 校园生活 -->
  <div class="campus-section">
    <h2 class="section-title">校园生活</h2>
    <div class="life-grid">
      <div
        v-for="(life, index) in campusLife"
        :key="index"
        class="life-card group"
      >
        <img :alt="life.title" :src="life.imageUrl" class="card-image" />
        <div class="card-overlay">
          <div class="card-content">
            <h3 class="card-title">{{ life.title }}</h3>
            <p class="card-description">{{ life.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.campus-section {
  @apply container mx-auto px-4 py-12;
}

.section-title {
  @apply mb-12 text-center text-3xl font-bold;
}

.life-grid {
  @apply grid grid-cols-2 gap-8;
}

.life-card {
  @apply relative overflow-hidden rounded-lg shadow-lg;
}

.card-image {
  @apply h-80 w-full object-cover transition-transform duration-300 group-hover:scale-110;
}

.card-overlay {
  @apply absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100;
}

.card-content {
  @apply text-center text-white;
}

.card-title {
  @apply mb-2 text-2xl font-bold;
}

.card-description {
  @apply text-lg;
}
</style>
